<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>🌏 时区时间转换工具</title>
  <script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 2rem;
      max-width: 700px;
      margin: auto;
      background: #f8f9fa;
    }
    h2 {
      text-align: center;
      margin-bottom: 2rem;
    }
    label {
      font-weight: bold;
      margin-top: 1rem;
      display: block;
    }
    input, select, button {
      width: 100%;
      padding: 0.6rem;
      margin: 0.4rem 0 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
    }
    button {
      background: #007bff;
      color: white;
      cursor: pointer;
      border: none;
      transition: background 0.3s;
    }
    button:hover {
      background: #0056b3;
    }
    .result {
      background: #fff;
      border-left: 5px solid #007bff;
      padding: 1rem;
      margin-top: 1rem;
      border-radius: 5px;
      white-space: pre-wrap;
      font-size: 0.95rem;
    }
    .error {
      color: red;
      margin-top: 1rem;
    }
    .copy-btn {
      margin-top: 0.5rem;
      background: #28a745;
    }
    .copy-btn:hover {
      background: #1e7e34;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 2rem;
      background: #fff;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 0.6rem;
      text-align: left;
    }
    th {
      background-color: #007bff;
      color: white;
    }
  </style>
</head>
<body>
  <h2>🕒 时区转换小工具</h2>

  <label for="inputDate">选择时间</label>
  <input type="datetime-local" id="inputDate" />

  <label for="fromZone">原始时区</label>
  <select id="fromZone"></select>

  <label for="toZone">目标时区</label>
  <select id="toZone"></select>

  <button onclick="convertTime()">转换时间</button>

  <div class="result" id="output">👇 转换结果将在这里显示</div>
  <button class="copy-btn" onclick="copyResult()">📋 复制结果</button>
  <div class="error" id="error"></div>

  <script>
    const { DateTime } = luxon

    const timezones = [
      { label: '北京（Asia/Shanghai）', value: 'Asia/Shanghai' },
      { label: '香港（Asia/Hong_Kong）', value: 'Asia/Hong_Kong' },
      { label: '日本（Asia/Tokyo）', value: 'Asia/Tokyo' },
      { label: '韩国（Asia/Seoul）', value: 'Asia/Seoul' },
      { label: '新加坡（Asia/Singapore）', value: 'Asia/Singapore' },
      { label: '印度（Asia/Kolkata）', value: 'Asia/Kolkata' },
      { label: '美国西部 - 洛杉矶（America/Los_Angeles）', value: 'America/Los_Angeles' },
      { label: '美国中部 - 芝加哥（America/Chicago）', value: 'America/Chicago' },
      { label: '美国东部 - 纽约（America/New_York）', value: 'America/New_York' },
      { label: '英国（Europe/London）', value: 'Europe/London' },
      { label: '德国（Europe/Berlin）', value: 'Europe/Berlin' },
      { label: '法国（Europe/Paris）', value: 'Europe/Paris' },
      { label: '澳大利亚 - 悉尼（Australia/Sydney）', value: 'Australia/Sydney' },
      { label: '新西兰（Pacific/Auckland）', value: 'Pacific/Auckland' },
      { label: '夏威夷（Pacific/Honolulu）', value: 'Pacific/Honolulu' },
      { label: 'UTC（协调世界时）', value: 'UTC' },
    ]

    function renderTimezoneOptions() {
      const fromSelect = document.getElementById('fromZone')
      const toSelect = document.getElementById('toZone')
      const tableBody = document.getElementById('timezoneTable')

      timezones.forEach(({ label, value }) => {
        const opt1 = new Option(label, value)
        const opt2 = new Option(label, value)
        fromSelect.appendChild(opt1)
        toSelect.appendChild(opt2)
      })

      fromSelect.value = 'Asia/Shanghai'
      toSelect.value = 'America/Los_Angeles'
    }

    document.addEventListener('DOMContentLoaded', () => {
      renderTimezoneOptions()
      const now = new Date()
      const local = now.toISOString().slice(0, 16)
      document.getElementById('inputDate').value = local
    })

    function convertTime() {
      const input = document.getElementById('inputDate').value
      const fromZone = document.getElementById('fromZone').value
      const toZone = document.getElementById('toZone').value
      const output = document.getElementById('output')
      const error = document.getElementById('error')

      error.textContent = ''

      if (!input) {
        error.textContent = '❌ 请选择一个时间'
        return
      }

      try {
        const dt = DateTime.fromISO(input, { zone: fromZone })
        const toTime = dt.setZone(toZone)

        const result = `
🌍 原始时间（${fromZone}）:
    ${dt.toFormat('yyyy-MM-dd HH:mm:ss ZZZZ')}

🕗 时间戳（UTC 毫秒）:
    ${dt.toMillis()}

➡️ 转换后时间（${toZone}）:
    ${toTime.toFormat('yyyy-MM-dd HH:mm:ss ZZZZ')}
            `.trim()

        output.textContent = result
      }
      catch (e) {
        error.textContent = '❌ 转换失败，请检查输入'
      }
    }

    function copyResult() {
      const result = document.getElementById('output').textContent
      if (!result || result.includes('将在这里显示'))
        return
      navigator.clipboard.writeText(result).then(() => {
        alert('✅ 已复制到剪贴板！')
      })
    }
  </script>
</body>
</html>
